<template>
	<view class="container">
		<!-- 用户信息区域 -->
		<view class="user-info" @click="showUserInfoPopup">
			<view class="avatar-wrapper">
				<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
			</view>
			<view class="user-detail">
				<text class="username">用户名</text>
				<view class="user-tags">
					<text class="tag">普通用户</text>
					<text class="tag">已认证</text>
				</view>
			</view>
		</view>

		<!-- 用户信息弹窗 -->
		<u-modal v-model="showModal" title="个人信息" :show-cancel-button="false" :show-confirm-button="false" width="80%">
			<view class="popup-info">
				<view class="form-group">
					<text class="label">用户名</text>
					<input type="text" class="input" v-model="userInfo.username" disabled />
				</view>
				<view class="form-group">
					<text class="label">真实姓名</text>
					<input type="text" class="input" v-model="userInfo.realname" placeholder="您的真实姓名还未填写"
						@blur="checkRealname" />
					<text class="error-msg" v-if="errors.realname">{{ errors.realname }}</text>
				</view>
				<view class="form-group">
					<text class="label">身份证号</text>
					<input type="text" class="input" v-model="userInfo.idcard" placeholder="您的身份证号码还未填写"
						@blur="checkIdCard" />
					<text class="error-msg" v-if="errors.idcard">{{ errors.idcard }}</text>
				</view>
				<view class="form-group">
					<text class="label">交易密码</text>
					<input type="password" class="input" v-model="userInfo.paypwd" placeholder="您的交易密码（6位数字）还未设置"
						@blur="checkPaypwd" />
					<text class="error-msg" v-if="errors.paypwd">{{ errors.paypwd }}</text>
				</view>
				<view class="form-group">
					<text class="label">手机号</text>
					<input type="text" class="input" v-model="userInfo.phone" placeholder="您的手机号还未填写"
						@blur="checkPhone" />
					<text class="error-msg" v-if="errors.phone">{{ errors.phone }}</text>
				</view>
				<view class="form-group">
					<text class="label">电子邮箱</text>
					<input type="email" class="input" v-model="userInfo.email" placeholder="您的邮箱地址还未填写"
						@blur="checkEmail" />
					<text class="error-msg" v-if="errors.email">{{ errors.email }}</text>
				</view>
			</view>
			<view class="modal-footer">
				<button class="cancel-btn" @click="closeModal">取消</button>
				<button class="confirm-btn" @click="updateUserInfo">保存</button>
			</view>
		</u-modal>

		<!-- 功能模块列表 -->
		<view class="function-list">
			<view class="function-item" @click="navigateTo('/pages/my/item/manage')">
				<image class="icon" src="/static/images/my/licai.png"></image>
				<text class="title">我的理财</text>
				<text class="arrow">></text>
			</view>

			<view class="function-item" @click="navigateTo('/pages/my/item/borrow')">
				<image class="icon" src="/static/images/my/jiedai.png"></image>
				<text class="title">我的借贷</text>
				<text class="arrow">></text>
			</view>

			<view class="function-item" @click="navigateTo('/pages/my/item/bankCard')">
				<image class="icon" src="/static/images/my/bank_card.png"></image>
				<text class="title">银行卡管理</text>
				<text class="arrow">></text>
			</view>

			<view class="function-item" @click="navigateTo('/pages/my/item/changePwd')">
				<image class="icon" src="/static/images/my/change_pwd.png"></image>
				<text class="title">修改密码</text>
				<text class="arrow">></text>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-button" @click="handleLogout">
			<text>退出登录</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showModal: false,
			userInfo: {
				username: '',
				realname: '',
				idcard: '',
				paypwd: '',
				phone: '',
				email: ''
			},
			errors: {
				realname: '',
				idcard: '',
				paypwd: '',
				phone: '',
				email: ''
			}
		}
	},
	methods: {
		showUserInfoPopup() {
			const user = uni.getStorageSync('user');
			uni.request({
				url: '/api/my/user/personal',
				method: 'POST',
				data: {
					username: user.username,
					password: user.password
				},
				success: (res) => {
					if (res.data.user) {
						this.userInfo = res.data.user;
					}
				}
			})
			this.showModal = true;
		},
		// 校验真实姓名
		checkRealname() {
			const realname = this.userInfo.realname;
			if (!realname) {
				this.errors.realname = 'Hello！这里还没填呢';
				return false;
			}
			const realnameReg = /^[\u4e00-\u9fa5]{0,}$/;
			if (!realnameReg.test(realname)) {
				this.errors.realname = '我猜也没有宁这号人呐';
				return false;
			}
			this.errors.realname = '';
			return true;
		},
		// 校验身份证号
		checkIdCard() {
			const idcard = this.userInfo.idcard;
			if (!idcard) {
				this.errors.idcard = 'Hello！这里还没填呢';
				return false;
			}
			const idcardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			if (!idcardReg.test(idcard)) {
				this.errors.idcard = '我猜宁这身份证号也不对呐';
				return false;
			}
			this.errors.idcard = '';
			return true;
		},
		// 校验交易密码
		checkPaypwd() {
			const paypwd = this.userInfo.paypwd;
			if (!paypwd) {
				this.errors.paypwd = 'Hello！这里还没填呢';
				return false;
			}
			const paypwdReg = /^\d{6}$/;
			if (!paypwdReg.test(paypwd)) {
				this.errors.paypwd = '我猜宁这交易密码不对呐';
				return false;
			}
			this.errors.paypwd = '';
			return true;
		},
		// 校验手机号
		checkPhone() {
			const phone = this.userInfo.phone;
			if (!phone) {
				this.errors.phone = 'Hello！这里还没填呢';
				return false;
			}
			const phoneReg = /^1[3,5,8]\d{9}$/;
			if (!phoneReg.test(phone)) {
				this.errors.phone = '我猜没有宁这手机号呐';
				return false;
			}
			this.errors.phone = '';
			return true;
		},
		// 校验邮箱
		checkEmail() {
			const email = this.userInfo.email;
			if (!email) {
				this.errors.email = 'Hello！这里还没填呢';
				return false;
			}
			const emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			if (!emailReg.test(email)) {
				this.errors.email = '我猜没有宁这邮箱呐';
				return false;
			}
			this.errors.email = '';
			return true;
		},
		// 关闭弹窗
		closeModal() {
			this.userInfo = {
				username: '',
				realname: '',
				idcard: '',
				paypwd: '',
				phone: '',
				email: ''
			}
			this.errors = {
				realname: '',
				idcard: '',
				paypwd: '',
				phone: '',
				email: ''
			}
			this.showModal = false;
		},
		// 更新用户信息
		updateUserInfo() {
			if (this.checkRealname() && this.checkIdCard() && this.checkPaypwd() && this.checkPhone() && this.checkEmail()) {
				const user = uni.getStorageSync('user');
				uni.request({
					url: '/api/my/user/updateUserProfile',
					method: 'POST',
					data: {
						username: user.username,
						password: user.password,
						realname: this.userInfo.realname,
						idcard: this.userInfo.idcard,
						paypwd: this.userInfo.paypwd,
						phone: this.userInfo.phone,
						email: this.userInfo.email
					},
					success: (res) => {
						if (res.data) {
							uni.showToast({
								title: '个人信息修改成功！',
								icon: 'success'
							});
							this.closeModal();
						} else {
							uni.showToast({
								title: '抱歉！哪里好像出现了问题？',
								icon: 'none'
							});
						}
					}
				});
			}
		},
		navigateTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除登录状态
						uni.removeStorageSync('user');
						// 跳转到登录页
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				}
			});
		}
	}
}
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.user-info {
	background-color: #ffffff;
	padding: 40rpx 30rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.avatar-wrapper {
	position: relative;
	margin-right: 30rpx;
}

.avatar {
	width: 140rpx;
	height: 140rpx;
	border-radius: 70rpx;
	border: 4rpx solid #ffffff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.avatar-edit {
	position: absolute;
	right: -10rpx;
	bottom: -10rpx;
	width: 40rpx;
	height: 40rpx;
	background-color: #007AFF;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4rpx solid #ffffff;
}

.edit-icon {
	color: #ffffff;
	font-size: 24rpx;
	font-weight: bold;
}

.user-detail {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.username {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 16rpx;
	color: #333333;
}

.user-tags {
	display: flex;
	gap: 16rpx;
}

.tag {
	font-size: 24rpx;
	color: #666666;
	background-color: #f5f5f5;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
}

.function-list {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 0 20rpx;
}

.function-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.function-item:last-child {
	border-bottom: none;
}

.icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}

.title {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
}

.arrow {
	color: #999999;
	font-size: 28rpx;
}

.logout-button {
	margin-top: 40rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 30rpx 0;
	text-align: center;
}

.logout-button text {
	color: #ff4d4f;
	font-size: 32rpx;
	font-weight: 500;
}

.popup-info {
	padding: 20rpx 30rpx;
}

.form-group {
	margin-bottom: 20rpx;
	position: relative;
}

.label {
	display: block;
	color: #666666;
	margin-bottom: 10rpx;
	font-size: 28rpx;
}

.error-msg {
	color: #ff4d4f;
	font-size: 24rpx;
	margin-top: 8rpx;
	display: block;
}

.input {
	width: 100%;
	height: 80rpx;
	border: 1rpx solid #e5e5e5;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	background-color: #ffffff;
	box-sizing: border-box;
}

.input.error {
	border-color: #ff4d4f;
}

.modal-footer {
	display: flex;
	background-color: #f8f8f8;
}

.cancel-btn {
	background-color: #ffffff;
	color: #666666;
	padding: 10rpx 0;
	border-radius: 0;
	font-size: 28rpx;
	transition: all 0.3s ease;
	flex: 1;
	text-align: center;
}

.cancel-btn:active {
	background-color: #f5f5f5;
}

.confirm-btn {
	background-color: #007AFF;
	color: #ffffff;
	padding: 10rpx 0;
	border-radius: 0;
	font-size: 28rpx;
	transition: all 0.3s ease;
	flex: 1;
	text-align: center;
}

.confirm-btn:active {
	background-color: #0062cc;
	transform: scale(0.98);
}
</style>
